<template>
  <div>
    <el-select placeholder="请选择" size="large" style="width: 240px">
      <el-option style="height: 408px; padding: 0">
        <el-tree-v2
          style="background-color: aquamarine"
          ref="treeRef"
          :data="data"
          :props="props"
          :filter-method="filterMethod"
          :height="308"
          :expand-on-click-node="false"
        ></el-tree-v2>
      </el-option>
    </el-select>
    <hr />
    <el-input
      v-model="query"
      style="width: 240px"
      placeholder="Please enter keyword"
      @input="onQueryChanged"
    />
    <el-tree-v2
      ref="treeRef"
      style="max-width: 600px"
      :data="data"
      :props="props"
      :filter-method="filterMethod"
      :height="308"
    ></el-tree-v2>
  </div>
</template>
<script setup>
const valueData = ref(null);
const getKey = (prefix, id) => {
  return `${prefix}-${id}`;
};

const createData = (
  maxDeep,
  maxChildren,
  minNodesNumber,
  deep = 1,
  key = "node"
) => {
  let id = 0;
  return Array.from({ length: minNodesNumber })
    .fill(deep)
    .map(() => {
      const childrenNumber =
        deep === maxDeep ? 0 : Math.round(Math.random() * maxChildren);
      const nodeKey = getKey(key, ++id);
      return {
        id: nodeKey,
        label: nodeKey,
        children: childrenNumber
          ? createData(maxDeep, maxChildren, childrenNumber, deep + 1, nodeKey)
          : undefined,
      };
    });
};

const query = ref("");
const treeRef = ref();
const data = createData(4, 30, 5);
const props = {
  value: "id",
  label: "label",
  children: "children",
};

const onQueryChanged = (query) => {
  treeRef.value.filter(query);
};
const filterMethod = (query, node) => {
  return node.label.includes(query);
};
</script>
